<template>
  <el-row :gutter="20">
    <el-col :span="6" v-for="item in tabData" :key="item.name" :xs="12" :sm="12" :md="6">
      <div class="item">
        <div class="icon">
          <el-image style="width: 60px; height: 45px" :src="item.icon" fit="fill" />
        </div>
        <div class="info">
          <div class="count">{{ item.count }}</div>
          <div class="name">{{ item.name }}</div>
        </div>
      </div></el-col
    >
  </el-row>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { getAssetURL } from '@/utils/load_assets'
const tabData = ref<any>([
  { name: '企业入驻', count: '100000+', icon: getAssetURL('client/home/icon4.png') },
  { name: '台服务器', count: '100000+', icon: getAssetURL('client/home/icon1.png') },
  { name: '合作单位', count: '100000+', icon: getAssetURL('client/home/icon2.png') },
  { name: '注册企业', count: '100000+', icon: getAssetURL('client/home/icon3.png') }
]);
</script>
<style lang="less" scoped>
.item {
  display: flex;
  background: #fff;
  align-items: center;
  justify-content: center;
  padding: 36px 0;
  border-radius: 6px;
  margin-bottom: 10px;
  .info {
    margin-left: 20px;
    .count {
      color: #000;
      font-family: PingFang SC;
      font-size: 20px;
      font-weight: 500;
      letter-spacing: 1px;
    }
    .name {
      color: #777;
      font-family: PingFang SC;
      font-size: 16px;
      margin-top: 2px;
    }
  }
}
</style>
